<!--  -->
<template>
  <div class="leftbar">
    <div class="imgbox">
      <img src="../../../assets/images/tDHIGcoOj.png" alt="" />
    </div>
    <div class="sliderbox">
      <img src="../../../assets/images/sliderpic.png" alt="" />
    </div>
    <div class="imgbox">
      <img src="../../../assets/images/NZgO0dfcL.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
};
</script>
<style scoped>
.leftbar {
  position: absolute;
  top: 110px;
  left: 0;
  width: 80px;
  height: calc(100% - 150px);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.leftbar .imgbox {
  width: 78px;
  height: 48%;
}
.imgbox img {
  width: 100%;
  height: 100%;
}
.sliderbox {
  width: 75px;
  height: 34px;
  animation: sliderright 4s infinite linear;
}
.sliderbox img{
    width: 100%;
    height: 100%;
}
@keyframes sliderright {
    0%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(40px);
    }
    100%{
        transform: translateX(0);
    }
}
</style>